<template>
<!-- 业委会信息 -->
    <div class="house-message">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/sys/houseMessage?navIndex=3' }">数据中心</el-breadcrumb-item>
          <el-breadcrumb-item>小区设置</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row class="el-margin-v-30 el-padding-l-25 el-padding-r-40">
          <el-row class="el-padding-20 el-white-bgcolor">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px">
              <el-form-item label="小区名称" prop="name">
                <!--el-col :span="6" v-if="dtype=='edit'">
                  <el-input v-model="ruleForm.name" placeholder="万科城市花园"></el-input>
                </el-col-->
                <el-col :span="6">
                  {{ruleForm.name}}
                </el-col>
              </el-form-item>
              <el-form-item label="所属区域" prop="area">
                <el-col :span="12" v-if="dtype=='edit'">
                  <el-select v-model="ruleForm.area.province" placeholder="请选择省份" @change="choose('province')">
                    <el-option :label="m.name" :value="m.no" v-for="(m,index) in pMaps" :key="index"></el-option>
                  </el-select>
                  <el-select v-model="ruleForm.area.city" placeholder="请选择市区" @change="choose('city')">
                    <el-option :label="m.name" :value="m.no" v-for="(m,index) in cMaps" :key="index"></el-option>
                  </el-select>
                  <el-select v-model="ruleForm.area.district" placeholder="请选择区县">
                    <el-option :label="m.name" :value="m.no" v-for="(m,index) in dMaps" :key="index"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="12" v-else>
                  {{ruleForm.area.provinceName}}{{ruleForm.area.cityName}}{{ruleForm.area.districtName}}
                </el-col>
              </el-form-item>
              <el-form-item label="总户数" prop="totalHouse">
                <el-col :span="3" v-if="dtype=='edit'">
                  <el-input v-model="ruleForm.totalHouse">
                    <template slot="append">人</template>
                  </el-input>
                </el-col>
                <el-col :span="3" v-else>
                  {{ruleForm.totalHouse}}
                </el-col>
              </el-form-item>
              <el-form-item label="总建筑面积" prop="totalArea">
                <el-col :span="3" v-if="dtype=='edit'">
                  <el-input v-model="ruleForm.totalArea">
                    <template slot="append">㎡</template>
                  </el-input>
                </el-col>
                <el-col :span="3" v-else>
                  {{ruleForm.totalArea}}
                </el-col>
              </el-form-item>
              <el-form-item label="专有部分面积" prop="personalArea">
                <el-col :span="3" v-if="dtype=='edit'">
                  <el-input v-model="ruleForm.personalArea">
                    <template slot="append">㎡</template>
                  </el-input>
                </el-col>
                <el-col :span="3" v-else>
                  {{ruleForm.personalArea}}
                </el-col>
              </el-form-item>
              <el-form-item label="小区地址" prop="address">
                <el-col :span="6" v-if="dtype=='edit'">
                  <el-input v-model="ruleForm.address" placeholder="湖北省武汉市洪山区光谷1路19号"></el-input>
                </el-col>
                <el-col :span="6" v-else>
                  {{ruleForm.address}}
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="reOrUp('edit')" v-if="dtype=='list'">修改</el-button>
                <el-button type="primary" size="small" @click="submitForm('ruleForm')"  v-if="dtype=='edit'">保存</el-button>
                <el-button size="small" @click="reOrUp('list')"  v-if="dtype=='edit'">返回</el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </el-row>
    </div>
</template>

<script>
	import { bus } from "../../tools/bus";
	import { setItem, getItem } from "../../tools/common";
export default {
    data(){
        return{
          dtype:'list',
          maps:[],
          pMaps:[],
          cMaps:[],
          dMaps:[],
          rdata:{},
          ruleForm: {
            name: '',
            totalHouse: '',
            totalArea: '',
            personalArea: '',
            address: '',
            area:{
              province:"",						//省编号
              provinceName:"",			  //省名字
              city:"",								//市编号
              cityName:"",						//市名字
              district:"",						//区县编号
              districtName:"" 			  //区县名字
            }

          },
          rules: {
            name: [
              { required: false, message: '请输入小区名称', trigger: 'blur' }
            ],
            totalHouse: [
              { required: true, message: '请输入总户数', trigger: 'blur' }
            ],
            totalArea: [
              { required: true, message: '请输入总建筑面积', trigger: 'blur' }
            ],
            personalArea: [
              { required: true, message: '请输入专有部分面积', trigger: 'blur' }
            ],
            address: [
              { required: false, message: '请输入小区地址', trigger: 'blur' }
            ],
            area:[
              { required: true, message: '请选择区域', trigger: 'blur' }
            ],
            province:[
              { required: true, message: '请选择省份', trigger: 'blur' }
            ],
            city:[
              { required: true, message: '请选择市区', trigger: 'blur' }
            ],
            district:[
              { required: true, message: '请选择区县', trigger: 'blur' }
            ]
          }
        }
    },
	mounted(){
    this.getMap();

	},
    methods: {
      getMap(){
        let url = "/community/regionList";
        let p = {};
        this.$http
          .fetch(url, p)
          .then(res => {
            this.maps = res.data;
            this.choose("country");
            this.getMessage();
          })
          .catch(err => {});
      },
      choose(t,unUpdate){
        if(t=="district")return false;
        let level = 1,prop="province",propMap="pMaps";
        if(t=="province"){
          level = 2;
          prop="city";
          propMap="cMaps";
        }else if(t=="city"){
          level = 3;
          prop="district";
          propMap="dMaps";
        }
        let rows = [];
        let name = "";
        for(let i =0;i<this.maps.length;i++){
          let row = this.maps[i];
          if(row.level==level&&(level==1||row.pno==this.ruleForm.area[t])){
            rows.push(row);
          }
          if(row.no==this.ruleForm.area[t]){
            name = row.name;
          }
        }
        if(!unUpdate){
          this.ruleForm.area[prop] = rows[0].no;
          this.ruleForm.area[prop+"Name"] = rows[0].name;
          if(t == "province"){
            this.ruleForm.area.provinceName = name;
          };
        }
        this[propMap] = rows;
        this.choose(prop,unUpdate);
      },
      getMessage(){
        let url = "/community/getInfo";
        let info = getItem("info")?getItem("info"):{};
        let p = {
          communityId: info.communityId
        };

        this.$http
          .fetch(url, p)
          .then(res => {
            console.log(res);
            let data = {
              committeeId:res.data.committeeId?res.data.committeeId:"",
              communityId: info.communityId,
              name: res.data.name?res.data.name:"",
              area:{
                province:res.data.province?res.data.province:"",						//省编号
                provinceName:res.data.provinceName?res.data.provinceName:"",			//省名字
                city:res.data.city?res.data.city:"",									//市编号
                cityName:res.data.cityName?res.data.cityName:"",						//市名字
                district:res.data.district?res.data.district:"",						//区县编号
                districtName:res.data.districtName?res.data.districtName:"",			//区县名字
              },
              address:res.data.address?res.data.address:"",							//地址
              totalHouse: res.data.houseNum?res.data.houseNum:"",
              totalArea: res.data.buildAreaNum?res.data.buildAreaNum:"",
              personalArea: res.data.exclusiveArea?res.data.exclusiveArea:""
            };
            this.rdata = JSON.parse(JSON.stringify(data));
            this.ruleForm = data;
            this.choose("province",true);
          })
          .catch(err => {});
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let url = "/community/setInfo";
            let info = getItem("info")?getItem("info"):{};
            let rdata = this.ruleForm;
            let p = {
              communityId: info.communityId,
              houseNum:rdata.totalHouse?rdata.totalHouse*1:"",                  //		int			必须		总户数
              buildAreaNum:rdata.totalArea?rdata.totalArea*1:"",                //	double		必须		总建筑面积
              exclusiveArea:rdata.personalArea?rdata.personalArea*1:"",         //	double		必须		专有部分面积
              regionNo:rdata.area.district?rdata.area.district:"",              //		string		必须		地区编号(传最后区县级别的编号)
              address:rdata.address?rdata.address:""                           //			string		必须		小区地址
            };
            console.log(rdata.area.district);
            this.$http
              .fetch(url, p)
              .then(res => {
                this.dtype = "list";
                this.getMap();
              })
              .catch(err => {});
          } else {
            return false;
          }
        });
      },
      reOrUp(type){
        this.dtype = type;
        if(type=="list"){
          this.ruleForm = JSON.parse(JSON.stringify(this.rdata));
          this.choose("province",true);
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<style scoped>

</style>
